<template>
  <div class='hello1'>
    <div class='img-warp'>
      <div class='cardBox' v-for='(item,index) in studenList' :key='index'>
        <div class='card-left'>
          <div class='card-title'>
            依据《职业教育法》、《深圳经济特区成人教育管理条例》、《深圳职业培训条例》，凡经职业培训合格的学员，发给职业培训证书。
          </div>
          <div class='card-stu-header'>
            <div style='margin-top: 60px; '>相&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;片</div>
            <div>(一寸近照)</div>
          </div>
          <div class='unit'>培训单位（印）</div>
          <div class='userInfo'>
            <ul>
              <li>
                <span class='user-lable'>姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名</span>
                <span class='user-content' style='width: 100px;'>
                  <p class='other font-w'>叶利春</p>
                </span>
                <span class='user-lable' style='padding-left: 10px;'>姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别</span>
                <span class='user-content' style='width: 53px;'>
                  <p class='other font-w '>女</p>
                </span>
              </li>
              <li>
                <span class='user-lable'>文化程度</span>
                <span class='user-content'>
                  <p class='other  font-w'>大专</p>
                </span>
              </li>
              <li>
                <span class='user-lable'>身份证号</span>
                <span class='user-content'>
                  <p class='other font15 font-w'>441523198906287062</p>
                </span>
              </li>
              <li>
                <span class='user-lable'>证书编码</span>
                <span class='user-content'>
                  <p class='other font15 font-w'>20180000047</p>
                </span>
              </li>
            </ul>
          </div>

        </div>
        <div class='card-right'>
          <div class='userInfo' style='margin-top: 45px;'>
            <ul>
              <li>
                <span class='user-lable pdr6'>职业(工种)</span>
                <span class='user-content'>
                  <p class='other font19'>企业基层员工核心能力</p>
                </span>
              </li>
              <li>
                <span class='user-lable pdr16'>培训层次</span>
                <span class='user-content'>
                  <p class='other font20 font-w'>适应性</p>
                </span>
              </li>
              <li>
                <span class='user-lable pdr16'>发证日期</span>
                <span class='user-content'>
                  <p class='other font15 font-w'>2018-10-08</p>
                </span>
              </li>
            </ul>
          </div>
          <table border='0' class='tabIntroduce'>
            <tr>
              <td class='tabheader' colspan='2'>职业培训简介</td>
            </tr>
            <tr>
              <td class='pl0' colspan='2' style='text-align: center;'>
                培训结业日期
                <span class='tab-cell'>2018</span>年
                <span class='tab-cell'>09</span>月
                <span class='tab-cell'>01</span>日
              </td>
            </tr>
            <tr>
              <td class='w170'>培训科目</td>
              <td class='pl30 ls'>学时</td>
            </tr>
            <tr>
              <td class='font-w'>职业道德</td>
              <td class='font-w pl30'>8</td>
            </tr>
            <tr>
              <td class='font-w'>理论</td>
              <td class='font-w pl30'>8</td>
            </tr>
            <tr>
              <td class='font-w'>实操</td>
              <td class='font-w pl30'>8</td>
            </tr>
            <tr>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td></td>
              <td></td>
            </tr>
          </table>
        </div>
      </div>
    </div>
    <div style=' position: absolute; '>

      <a class='downimg' @click='handledata' style=' cursor: pointer;'>下载</a>

    </div>

  </div>
</template>

<script>
// import $ from 'jquery'
import html2canvas from 'html2canvas'
import JSZip from 'jszip'
import saveAs from 'file-saver'

export default {
  name: 'downImg',
  data () {
    return {
      studenList: [{}],
      imgurlArr: []
    }
  },
  methods: {
    handledata () {
      this.studenList = [{}, {}, {}, {}, {}, {}, {}]
      setTimeout(() => {
        this.downloImg()
      }, 50)
    },
    downloImg () {
      for (var i = 0; i < this.studenList.length; i++) {
        var canvas2 = document.createElement('canvas')
        let _canvas = document.querySelectorAll('.cardBox')[i]
        var w = parseInt(window.getComputedStyle(_canvas).width) || 720
        var h = parseInt(window.getComputedStyle(_canvas).height) || 526
        // 将canvas画布放大若干倍，然后盛放在较小的容器内，就显得不模糊了
        canvas2.width = w * 40
        canvas2.height = h * 40
        canvas2.style.width = w + 'px'
        canvas2.style.height = h + 'px'
        // 可以按照自己的需求，对context的参数修改,translate指的是偏移量
        var context = canvas2.getContext('2d')
        context.scale(1, 1)
        var timer = null
        let _this = this
        html2canvas(document.querySelectorAll('.cardBox')[i], { canvas: canvas2 }).then(function (canvas) {
          console.log('lo')
          _this.imgurlArr.push(canvas.toDataURL())
          clearTimeout(timer)
          timer = setTimeout(() => {
            _this.packageImages()
          }, 1000)
        })
      }
    },
    packageImages () {
      console.log('打包')
      var imgs = this.imgurlArr
      var imgBase64 = []
      var imageSuffix = [] // 图片后缀
      var zip = new JSZip()
      var img = zip.folder('images')
      this.imgurlArr.forEach((item, index) => {
        imageSuffix.push('.png')
        this.getBase64().then((base64) => {
          imgBase64.push(item.substring(22))
          // console.log(base64);//处理成功打印在控制台
        }, (err) => {
          console.log(err) // 打印异常信息
        })
      })

      function tt () {
        setTimeout(() => {
          if (imgs.length === imgBase64.length) {
            for (var i = 0; i < imgs.length; i++) {
              img.file(i + imageSuffix[i], imgBase64[i], { base64: true })
            }
            zip.generateAsync({ type: 'blob' }).then(function (content) {
              // see FileSaver.js
              saveAs(content, 'images.zip')
            })
          } else {
            tt()
          }
        }, 100)
      }
      tt()
    },
    // 传入图片路径，返回base64
    getBase64 () {
      let promise = new Promise((resolve) => {
        setTimeout(() => {
          resolve()
        }, 10)
      })
      return promise
    }
  }
}
</script>
<style scoped>
* {
  margin: 0;
}
body {
  background: #ddd;
}
.img-warp {
  /* opacity: 0; */
  position: absolute;
  height: 1000px;
  width: 1000px;
  overflow: hidden;
}
.cardBox {
  background: #fff;
  width: 720px;
  height: 526px;
  display: block;
  vertical-align: top;
  float: left;
}
.cardBox .card-left {
  float: left;
  width: 360px;
  height: 526px;
  padding: 20px 10px;
  box-sizing: border-box;
}
.cardBox .card-left .card-title {
  text-align: left;
  padding: 0 20px;
  line-height: 26px;
  font-size: 14px;
}
.card-stu-header {
  font-size: 12px;
  text-align: center;
  width: 122px;
  height: 165px;
  box-sizing: border-box;
  border: 1px dotted black;
  margin: 0px auto;
  margin-top: 10px;
}
.unit {
  width: 122px;
  padding-left: 10px;
  margin: 0 auto;
  text-align: center;
  font-size: 12px;
  line-height: 22px;
}
.userInfo {
  font-size: 15px;
  padding: 0 26px 0 25px;
  margin-top: 30px;
}
.userInfo ul {
  margin: 0;
  padding: 0;
  padding-inline-start: 0px;
}
.userInfo li {
  list-style: none;
  margin: 0;
  padding: 0;
  height: 45px;
}
.userInfo li span {
  display: table-cell;
}
.userInfo li span.user-lable {
  vertical-align: bottom;
  padding-right: 10px;
}
.font15 {
  font-size: 16px !important;
}
.font19 {
  font-size: 19px !important;
}
.font20 {
  font-size: 20px !important;
}
.card-left .userInfo li .user-content {
  margin-left: 7px;
  width: 76%;
  border-bottom: 1px solid black;
  padding-left: 24px;
  text-align: left;
  box-sizing: border-box;
}
.userInfo li .other {
  font-size: 20px;
  line-height: 30px;
  margin-bottom: 1px;
}
.cardBox .card-right {
  float: left;
  width: 360px;
  height: 526px;
  padding: 20px 20px;
  box-sizing: border-box;
  float: left;
}
.pdr6 {
  padding-right: 6px !important;
}
.pdr16 {
  padding-right: 16px !important;
}
.card-right .user-content {
  margin-left: 7px;
  width: 190px !important;
  border-bottom: 1px solid black;
  text-align: center;
  box-sizing: border-box;
}

.tabIntroduce {
  border-left: 1px solid black;
  border-bottom: 1px solid black;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 270px;
  margin: 0 auto;
  margin-top: 18px;
}
.tabIntroduce td {
  border-top: 1px solid black;
  border-right: 1px solid black;
  box-sizing: border-box;
}
.tabIntroduce .tabheader {
  text-align: center;
  height: 28px;
  vertical-align: bottom;
  letter-spacing: 5px;
}
.tabIntroduce td {
  text-align: left;
  height: 36px;
  padding-left: 36px;
}
.tabIntroduce td.pl30 {
  padding-left: 30px !important;
}
.w170 {
  width: 170px;
}
.font-w {
  font-weight: bold;
}
.ls {
  letter-spacing: 16px;
}
.tab-cell {
  display: inline-block;
  border-bottom: 1px solid black;
  padding: 0 4px;
}
.pl0 {
  padding-left: 0px !important;
}

canvas {
  margin-right: 5px;
}

.down {
  float: left;
  margin: 40px 10px;
}

.down2 {
  float: left;
  margin: 40px 30px;
}
</style>
